<template>
  <div style="height:100%">
    <tab>
      <tab-item v-for="ti in tabItemList" track-by=$index @click="$router.go(ti.link)" :selected="$index==tabIndex">{{ti.slot}}</tab-item>
    </tab>
    <div style="height:calc(100% - 45px)">
      <router-view :transition="'vux-pop-' + (isRouterForward ? 'in' : 'out')"></router-view>
    </div>
  </div>
</template>

<script>
import Tab from 'vux/dist/components/tab'
import TabItem from 'vux/dist/components/tab-item'

export default {
  components: {
    Tab,
	TabItem
  },
  data() {
    return {
	  tabItemList: [{
	    slot: 'index',
	    link: '/'
	  }, {
	    slot: 'starUrl',
	    link: '/starUrl'
	  }, {
	    slot: 'add',
	    link: '/add'
	  }],
	  isRouterForward: true,
	  tabIndex: 0
	}
  },
  ready() {
    this.$emit('router-go', location.hash.substring(2))
  },
  events: {
    'router-go': function(path) {
	  var tabIndex = 0
	  for(var i=0; i<this.tabItemList.length; i++) {
	    if(this.tabItemList[i].link == path) {
		  tabIndex = i
		  break
		}
	  }
	  this.isRouterForward = (tabIndex >= this.tabIndex)
	  this.tabIndex = tabIndex
	}
  }
}
</script>